<div id="editor1" contenteditable="true">
	<table align="center" border="5" dir="ltr" style="border-collapse:collapse;border-color:#696969;width:90%;">
		<thead>
			<tr>
				<th scope="col">
				<p><span style="font-family:Comic Sans MS, cursive"><span style="font-size:20px;"><em><strong><u><span style="color:#DAA520;"><span style="background-color:#00FF00;">Header cell Comic Sans Size 20&nbsp;Bold Italic nderline</span></span></u></strong></em></span></span></p>
				</th>
				<th scope="col">&nbsp;</th>
				<th scope="col">Header Cell</th>
				<th scope="col">&nbsp;</th>
				<th scope="col">&nbsp;</th>
			</tr>
		</thead>
		<caption>Copy Formatting</caption>
		<tbody>
			<tr>
				<td style=" border-color : #696969;">normal text</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style="text-align: center; vertical-align: top; border-color: rgb(221, 160, 221); border-style: solid; white-space: nowrap; background-color: rgb(255, 165, 0);">
				<p>Horizontal Alignment - Center</p>

				<p>Vertical Alignment - Top</p>

				<p>Word Wrap&nbsp;- No</p>

				<p>Cell Type - Data</p>

				<p>Background Colour - Orange</p>

				<p>Border Colour - Plum</p>
				</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">Table has LTR Language direction, width 90%, Align: Center, Border Size: 5, Headers: First Row</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style="text-align: center; vertical-align: top; background-color: rgb(255, 165, 0); border-color: rgb(221, 160, 221); border-style: solid; ">apple</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">
				<p><span style="background-color:#008000;"><span style="color:#B22222;">Text with Back ground colour &amp; text colour not the Cell Colour</span></span></p>

				<p><span style="background-color:#008000;"><span style="color:#B22222;"><span style="font-family:Times New Roman, Times, serif"><span style="font-size:26px;">Times New Roman &amp; Size 26</span></span></span></span></p>
				</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
		</tbody>
	</table>

	<p dir="ltr">some text below</p>

	<p dir="ltr">&nbsp;</p>

	<p dir="ltr">Normal Table<br />
	&nbsp;</p>

	<table border="1" dir="ltr" style="width: 500px; table-layout: fixed; word-wrap: break-word; border-collapse : collapse; border-color : #696969;">
		<tbody>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">Table with fixed width of 500PX</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
		</tbody>
	</table>

	<p dir="ltr">&nbsp;</p>
</div>

<div id="editor2" contenteditable="true">
	<table align="center" border="5" dir="ltr" style="border-collapse:collapse;border-color:#696969;width:90%;">
		<thead>
			<tr>
				<th scope="col">
				<p><span style="font-family:Comic Sans MS, cursive"><span style="font-size:20px;"><em><strong><u><span style="color:#DAA520;"><span style="background-color:#00FF00;">Header cell Comic Sans Size 20&nbsp;Bold Italic nderline</span></span></u></strong></em></span></span></p>
				</th>
				<th scope="col">&nbsp;</th>
				<th scope="col">Header Cell</th>
				<th scope="col">&nbsp;</th>
				<th scope="col">&nbsp;</th>
			</tr>
		</thead>
		<caption>Copy Formatting</caption>
		<tbody>
			<tr>
				<td style=" border-color : #696969;">normal text</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style="text-align: center; vertical-align: top; border-color: rgb(221, 160, 221); border-style: solid; white-space: nowrap; background-color: rgb(255, 165, 0);">
				<p>Horizontal Alignment - Center</p>

				<p>Vertical Alignment - Top</p>

				<p>Word Wrap&nbsp;- No</p>

				<p>Cell Type - Data</p>

				<p>Background Colour - Orange</p>

				<p>Border Colour - Plum</p>
				</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">Table has LTR Language direction, width 90%, Align: Center, Border Size: 5, Headers: First Row</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style="text-align: center; vertical-align: top; background-color: rgb(255, 165, 0); border-color: rgb(221, 160, 221); border-style: solid; ">apple</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">
				<p><span style="background-color:#008000;"><span style="color:#B22222;">Text with Back ground colour &amp; text colour not the Cell Colour</span></span></p>

				<p><span style="background-color:#008000;"><span style="color:#B22222;"><span style="font-family:Times New Roman, Times, serif"><span style="font-size:26px;">Times New Roman &amp; Size 26</span></span></span></span></p>
				</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
				<td style=" border-color : #696969;">&nbsp;</td>
			</tr>
		</tbody>
	</table>

	<p dir="ltr">some text below</p>

	<p dir="ltr">&nbsp;</p>

	<p dir="ltr">Normal Table<br />
	&nbsp;</p>

	<table border="1" dir="ltr" style="width: 500px; table-layout: fixed; word-wrap: break-word; border-collapse : collapse; border-color : #696969;">
		<tbody>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">Table with fixed width of 500PX</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
			<tr>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
				<td style="overflow: hidden; width: 250px; border-color : #696969;">&nbsp;</td>
			</tr>
		</tbody>
	</table>

	<p dir="ltr">&nbsp;</p>
</div>

<script>
	CKEDITOR.replace( 'editor1', {
		allowedContent: true,
		extraPlugins: 'sourcearea'
	} );
	CKEDITOR.inline( 'editor2', {
		allowedContent: true,
		extraPlugins: 'dialog,sourcedialog'
	} );
</script>
